<template>
  <div>
    <div class="evaluate-rate">
      <div>好评度：</div>
      <span>{{ rateData.highRate }}%</span>
    </div>
    <a-tabs :active-key="params.scoreStr" @change="tabChange">
      <a-tab-pane v-for="(tab,index) in tabs" :key="tab.value">
        <span slot="tab">
          {{ tab.label }}
          <span>{{ tabNum(index) }}</span>
        </span>
      </a-tab-pane>
      <a-radio-group slot="tabBarExtraContent" v-model="params.orderBy" @change="orderChange">
        <a-radio-button value="create_time">
          时间排序
        </a-radio-button>
        <a-radio-button value="synthetical_score">
          推荐排序
        </a-radio-button>
      </a-radio-group>
    </a-tabs>
    <a-empty v-if="data.length===0"></a-empty>
    <a-spin v-else :spinning="evaluateLoading" tip="加载中...">
      <div v-for="item in data" :key="item.id" class="evaluate-item">
        <div class="evaluate-user">
          <img src="../../../assets/images/detail/head.png" alt=""/>
          <div>{{ item.userName }}</div>
        </div>
        <div class="evaluate-content">
          <div class="evaluate-item-rate">
            <rate-star :rate="item.syntheticalScore"></rate-star>
            <span>{{ item.syntheticalScore || 0 }}星</span>
          </div>
          <div class="evaluate-item-content">
            {{ item.content }}
          </div>
          <div class="evaluate-bottom">
            <div>{{ goodsName }}</div>
            <div>{{ item.createTime }}</div>
          </div>
        </div>
      </div>
    </a-spin>
    <paging
      style="margin-top: 20px;"
      :total="paging.total"
      :current="paging.page"
      :defaultPageSize="paging.limit"
      @pageChange="handlePageChange"
      ref="paging"
    />
  </div>
</template>

<script>
import {pageMixin, tableMixin} from '@/mixins'
import Paging from '@/components/base/Paging'
import {getGoodsReviewPage, reviewCount} from '@/api/review'
import {evaluateTabs} from '../config'
import RateStar from '@/components/RateStar'

export default {
  name: 'Evaluates',
  props: {
    id: '',
    goodsName: '',
  },
  components: {
    RateStar,
    Paging
  },
  mixins: [pageMixin, tableMixin],
  data () {
    return {
      rateData: {
        highRate: 0,
        count: 0,
        highCount: 0,
        middleCount: 0,
        badCount: 0,
      },
      params: {
        orderBy: 'create_time',
        order: 'desc',
        scoreStr: ''
      },
      tabs: evaluateTabs,
      data: [],
      evaluateLoading: false
    }
  },
  created () {
    this.loadData()
    this.loadRate()
  },
  methods: {
    loadData () {
      if (this.evaluateLoading) return
      this.evaluateLoading = true
      getGoodsReviewPage({
        page: this.paging.page,
        limit: this.paging.limit,
        goodsId: this.id,
        ...this.params
      }).then(res => {
        this.evaluateLoading = false
        if (res.code === 0) {
          this.data = res.data.records
          this.paging.total = Number(res.data.total) || 0
        }
      }).catch(e => {
        console.log(e)
        this.evaluateLoading = false
      })
    },
    loadRate () {
      reviewCount({}, this.id).then(res => {
        if (res.code === 0) {
          this.rateData = {...res.data}
          if (this.rateData.highRate) {
            this.rateData.highRate *= 100
          }
        }
      })
    },
    handlePageChange (page, limit) {
      this.paging.page = page
      this.paging.limit = limit
      this.loadData()
    },
    orderChange (e) {
      this.loadData()
    },
    tabChange (e) {
      this.params.scoreStr = e
      setTimeout(() => {
        this.loadData()
      }, 300)
    },
    tabNum (index) {
      let result = ''
      if (index === 0) {
        result = this.rateData.count
      }
      if (index === 1) {
        result = this.rateData.highCount
      }
      if (index === 2) {
        result = this.rateData.middleCount
      }
      if (index === 3) {
        result = this.rateData.badCount
      }
      return result ? '(' + result + ')' : ''
    }
  }
}
</script>

<style scoped lang="scss">

.evaluate-rate {
  width: 100%;
  border-bottom: 1px dashed #c7c7c7;
  padding-bottom: 20px;
  padding-top: 4px;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC, sans-serif;
  font-weight: 400;
  color: #646464;
  line-height: 14px;
  margin-bottom: 3px;

  span {
    margin-left: 10px;
    font-size: 30px;
    font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
    font-weight: 600;
    color: #E03437;
    line-height: 30px;
  }
}

.evaluate-header {
  width: 100%;
  height: 50px;
  background: #FFFFFF;
  box-shadow: inset 0px -1px 0px 0px #E2E2E2;
}

.evaluate-item {
  margin-top: 20px;
  display: flex;
  align-items: flex-start;

  &:first-child {
    margin-top: 4px;
  }

  .evaluate-user {
    width: 60px;

    img {
      width: 60px;
      height: 60px;
    }

    div {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: #323232;
      text-align: center;
      line-height: 12px;
      word-break: break-all;
      margin-top: 10px;
    }
  }

  .evaluate-content {
    flex: 1;
    margin-left: 20px;
    padding-bottom: 20px;
    border-bottom: 1px dotted #e2e2e2;

    .evaluate-item-rate {
      display: flex;
      align-items: center;

      span {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC, sans-serif;
        font-weight: 400;
        color: #646464;
        line-height: 12px;
        margin-left: 6px;
      }
    }

    .evaluate-item-content {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      margin-top: 10px;
      color: #323232;
      line-height: 22px;
      word-break: break-all;
    }

    .evaluate-bottom {
      margin-top: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: #909090;
      line-height: 12px;

      div:first-child {
        flex: 1;
        width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      div:last-child {
        margin-left: 10px;
      }
    }
  }
}
</style>
